<template>
  <div style="width: 100%;height: 100%;position: relative;">
    <div id="mapDiv" style="width: 100%;height: 100%;"></div>

    <div class="unit">
      <div class="query">
        <el-input style="width: 260px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);" placeholder="请输入地址查询" clearable
          v-model="address">
          <el-button slot="append" icon="el-icon-search" @click="queryList"></el-button>
        </el-input>
        <div class="ubtn">
          <div class="btn" @click="openLineTool(true)">
            <!--            <i class="el-icon-edit"/>-->
            <el-image class="img" :src="img.ceju" />
            <span>测距</span>
          </div>
          <div class="btn" @click="addPoint()">
            <el-image class="img" :src="img.biaozhu" />
            <span>标注</span>
          </div>
          <div class="btn" @click="openRectangleTool">
            <el-image class="img" :src="img.kuangxuan" />
            <span>框选</span>
          </div>
          <div class="btn" @click="addPolygon">
            <el-image class="img" :src="img.duobianxing" />
            <span>多边形</span>
          </div>

          <div class="btn" @click="delArr">
            <el-image class="img" :src="img.del" />
            <span>清空</span>
          </div>
        </div>
        <!-- <el-select v-model="localIndex" placeholder="请选择电话号查看轨迹" clearable @change="handleChange"
          style="width: 160px; margin-left: 10px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);">
          <el-option v-for="(route, i) in allRoutes" :key="i" :label="route.trackId" :value="i" />
        </el-select> -->
      </div>
      <!--和上面的搜索同大小-->
      <div class="listAddress" v-loading="query.loading" element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading" style="width: 475px;" v-if="showAdderss">
        <div
          style="position: relative;min-height: 280px;padding: 10px;display:flex;flex-direction: column;padding-top: 30px;color: #444444;">
          <i class="el-icon-close" @click="showAdderss = false"
            style="position: absolute; top: 5px; right: 5px; background-color: rgb(245, 244, 243); border-radius: 4px; padding: 3px; cursor: pointer;" />

          <el-link @click="goPoint(item)" type="primary" v-for="(item, index) in addRessList" :key="index"
            style="display:flex;flex-direction: row;align-items: center;margin-bottom: 5px;    justify-content: flex-start;">
            {{ index + 1 }}、{{ item.name }}
          </el-link>

          <span v-if="addRessList.length === 0">暂无记录</span>
        </div>

        <div style="position:absolute;bottom: 5px;width: 100%">
          <el-pagination style="width: 260px;" @current-change="pageQuery" :current-page.sync="query.page"
            :page-size="query.pageSize" layout="total, prev, pager, next" :total="query.total" />
        </div>
      </div>
    </div>
  </div>

</template>
<script>
import maps, { pointInfo, markerList } from './index'

var localSearch;
export default {
  props: {
    allRoutes: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      localIndex: null,
      showAdderss: false,
      address: undefined,
      addRessList: [],
      query: {
        total: 0,
        pageSize: 10,
        page: 1,
        loading: true,
      },
      img: {
        ceju: require("./imgs/ceju.svg"),
        biaozhu: require("./imgs/biaozhu.svg"),
        del: require("./imgs/del.svg"),
        duobianxing: require("./imgs/duobianxing.svg"),
        kuangxuan: require("./imgs/kuangxuan.svg"),

      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.onLoad()
    })
  },
  methods: {
    onLoad() {
      let that = this
      maps.init({
        id: 'mapDiv',
        centerPoint: [114.289910, 30.594480],
        zoom: 12
        // centerPoint: [112.86621,31.07176],
        // zoom: 7
      })
      localSearch = maps.QeruObj.CreateQuery(that.localSearchResult, 10)//创建搜索


      maps.mapClick((v) => {
        console.log('当前地图点击位置:' + v.lnglat.getLng() + "," + v.lnglat.getLat())
      })
    },
    /*查询所有*/
    queryList() {
      this.query.loading = true;
      maps.QeruObj.Query(this.address)
      this.showAdderss = true
    },
    /*接受搜索对象*/
    localSearchResult(result) {
      this.query.loading = false;
      maps.deletePoint()
      if (parseInt(result.getResultType())) {
        let data = result.getPois()
        if (!data) return;
        let zoomArr = [];
        data.forEach((item) => {
          let obj = { ...pointInfo }
          obj.pointType = 'point'
          obj.point = item.lonlat.split(',')
          obj.name = item.name
          obj.address = item.address
          obj.txt = '名称:' + item.name
          maps.CreatePoint.addPoint(obj)
          zoomArr.push(obj)
        })
        this.addRessList = zoomArr
        this.query.total = localSearch.getCountNumber()
      }
    },
    pageQuery(page) {
      maps.QeruObj.Pages(page)
    },
    openLineTool() {
      maps.Unit.openLineTool((e) => {
        // console.log(e, 'e')
      })
    },
    puPoint(point, txt,matchedUser) {
      console.log('txt',txt)
      // this.delArr()
      this.trajectoryStartAndStop('clear')
      let p = { ...pointInfo }
      console.log(matchedUser)
      p.id = matchedUser.userId || matchedUser.remark2
      p.point = point
      p.txt = " 用户：" + txt.trackId + ' <br /> 时间：' + txt.time;
      maps.CreatePoint.addPoint(p)
      maps.JumpLocation(point)
    },
    puPoints(point, txt,userId) {
      console.log('txts',txt)
      // this.delArr()
      this.trajectoryStartAndStop('clear')
      let p = { ...pointInfo }
      p.id = userId
      p.point = point
      p.txt = " 用户：" + txt.realName + ' <br /> 时间：' + txt.time;
      maps.CreatePoint.addPoint(p)
      // maps.JumpLocation(point)
    },
    /*添加多边形*/
    addPolygon() {
      maps.Unit.polygon((e) => {
        let that = this
        let pointAll = e.currentLnglats.map(x => {
          return [x.getLat(), x.getLng()]
        })
        let arr = []
        console.log('多边形数组1',pointAll)
        console.log('多边形数组2',markerList)

        markerList.forEach(point => {
          if (maps.Unit.isPointInPolygon(point.point, pointAll)) {

            arr.push(point)

          }
        })
        console.log('多边形数组3',arr)
        this.$emit('rectangle', arr)
      })
    },
    /*绘制矩形并获取范围内标注点*/
    openRectangleTool() {
      maps.Unit.openRectangle((e) => {
        const sw = e.currentBounds.Lq
        const ne = e.currentBounds.kq
        let arr = maps.Unit.isRectangleTool(sw, ne, markerList)
        console.log('矩形数组',arr)
        this.$emit('rectangle', arr)
      })
    },
    //创建标注
    addPoint(point, txt) {
      let p = { ...pointInfo }
      p.point = point
      p.txt = txt;
      maps.CreatePoint.CreateMap(p)
    },

    /*跳转坐标*/
    goPoint(point) {
      maps.deletePoint()
      let p = { ...point };
      p.txt = '名称:' + point.name + '</br>地址:' + point.address
      maps.CreatePoint.addPoint(p)
      maps.JumpLocation(p.point)
    },
    /*创建轨迹*/
    // trajectory(points) {
    //   maps.Trajectory.Create(points, (point, index, length) => {
    //     console.log(point, index, length)
    //   })
    // },
    trajectory(points, trackId = '未知编号', realName,startTime = '未知时间') {
      maps.Trajectory.Create(points, (point, index, length) => {
        console.log(point, index, length)
      }, {
        realName: realName,
        trackId: trackId,
        startTime: startTime,
        showStartEnd: true
      })
    },
    /*轨迹开始 暂停 停止 播放 清空*/
    trajectoryStartAndStop(v) {
      maps.Trajectory.StartAndStop(v)
    },

    trajectoryCreatePointList(points, timeArray) {
      maps.Trajectory.createPointList(points, timeArray)
    },

    delArr() {
      maps.deletePoint()
    },
    handleChange(index) {

      // 向父组件 emit 事件，传回 trackId
      this.$emit('track-selected', index);

      // 也可以传整个对象
      // this.$emit('track-selected', selectedRoute);
    }
  }
}


</script>
<style scoped lang="scss">
::v-deep .tdt-control-copyright {
  display: none;
}

.query {
  position: absolute;
  left: 320px;
  top: 72px;
  z-index: 999;
  display: flex;
  flex-direction: row;
  //width: 600px;
  padding: 5px 0;


  .ubtn {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #ffffff;
    margin-left: 7px;
    color: #444444;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
    border-radius: 4px;

    .btn {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin: 0 5px;
      cursor: pointer;

      .img {
        width: 18px;
        height: 18px;
      }

      span {
        margin-left: 3px;
        font-size: 15px;
      }
    }

    .btn:hover {
      color: #00afff;
    }
  }
}

.listAddress {
  position: absolute;
  left: 320px;
  top: 110px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 4px;
}
</style>
